<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>2、v-bind</title>
  <style>
    .red{
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app"> 

    <div v-bind:title="title" :class="{red:isred}" :style="{fontSize: bigFont}">
      鼠标悬停查看消息！
    </div>
    <div>
      <a :href="href">图灵学院</a>
    </div>
    <div>
      <img :src="src"/>
    </div>
    <div>
      <button v-bind:disabled="disabled">禁用按钮</button>
    </div>
  </div>
</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: { 
      isred:true,
      bigFont:"50px",
    	title: "您好，我是徐庶老师，欢迎来到图灵学院！希望你可以在图灵学院学到更多的东西！",
      href: 'https://www.tulingxueyuan.cn/',
      src: 'https://tuling--mall.oss-cn-chengdu.aliyuncs.com/20210114134341.png',
      disabled: true
    }
  })  

  // 绑定元素属性 --   v-bind
  /*
    语法：   v-bind:元素属性="vue的属性"

    简写：  v-bind:title 简写成  :title

    针对样式的特殊用法 
      动态控制class是否添加  :class="{red:isred}"
        语法  {red:isred}  : {需要动态控制的class样式:vue的属性（需要是bool类型）}

      动态设置style的样式：:style="{fontSize: bigFont}"
        语法{fontSize: bigFont}   ：  {css样式的驼峰命名方式:vue的属性}: font-size=fontSize 
  */

</script>
</html>